<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bgc{
            background-color: skyblue;
        }
        .ft{
            font-size: 28px;
        }
        .bd{
            border:3px solid #000;
        }
        .red{
            color:red;
        }
    </style>
</head>
<body>
    <div id="app">
        <p class="ft bgc ">原始写法</p>
        <p v-bind:class="['ft','bgc']">数组中的内容是字符串</p>
        <!-- 简写 -->
        <p :class="['ft','bgc','bd']">v-bind:class的简写形式 :class</p>
        <p :class="styles">数组名的形式获取样式，数组内容在data中</p>
        <p :class="['ft','bgc',flag?'red':'']">三元表达式来判</p>
        <p :class="{'red':true,'bgc':false,'bd':true}">对象的方法，用布尔值来判断</p>
         <p :class="styleObj">在data中声明对象，引用对象名进行样式操作</p>
    </div>

    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                styles:['ft','bgc','bd'],
                flag:true,
                styleObj:{'red':true,'bgc':false,'bd':true,'ft':true}
            },
        })
    </script>
</body>
</html>